<style>
.{{$t|escape:'html'}}_main {
  border-left: 15px solid #d6e3f7;
  border-right: 15px solid #d6e3f7;
  width: 1250px;
}
.{{$t|escape:'html'}}_subtitle {
  background-color: #dce6f6;
  padding: 7px 0 7px 10px;
  font-family: Arial Black;
}
.{{$t|escape:'html'}}_emphasis {
  background-color: #e3ebf8;
  font-weight: bold;
  font-family: Trebuchet MS;
}
.{{$t|escape:'html'}}_eg {
  font-family: Trebuchet MS;
}
table.{{$t|escape:'html'}}_table td {
}
table.{{$t|escape:'html'}}_table td.title {
  font-weight: bold;
  text-align: right;
  padding: 2px 10px 2px 20px;
  margin-right: 20px;
  background-color: #e3ebf8;
  font-family: Trebuchet MS;
  width: 150px;
}
.{{$t|escape:'html'}}_select {
  width: 195px;
  height: 26px;
  margin-left: 4px;
}
.{{$t|escape:'html'}}_text {
  width: 190px;
  height: 20px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_button {
  margin-top: 10px; 
  margin-left: 3px; 
}
.{{$t|escape:'html'}}_textarea {
  width: 380px;
  height: 160px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_status_text {
  font-weight: bold;
  padding-bottom: 5px;
  font-family: Arial;
}
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_listde {
  width: 100%;
  border-left: 1px solid #c8cddb;
  border-top: 1px solid #c8cddb;
}
table.{{$t|escape:'html'}}_listde td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #c8cddb;
  border-bottom: 1px solid #c8cddb;
  background-color: c8cddb;
  color: #ffffff;
  font-weight: bold;
}
table.{{$t|escape:'html'}}_listdrop {
  width: 100%;
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td {
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td.title {
  padding: 5px 10px 5px 20px;
  height: 35px;
  background-color: #dde1eb;
  font-weight: bold;
  text-align: right;
  width: 100px;
  color: 7b7b7b;
  font-size: 11px;
}
table.{{$t|escape:'html'}}_list {
  width: 100%;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 30px;
  background-color: #99b0ea;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-size: 12px;
}
table.{{$t|escape:'html'}}_list tr.drop td {
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
}
table.{{$t|escape:'html'}}_list tr.hi td {
  padding-left: 10px;
  height: 35px;
  background-color: #ff8000;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_list tr.roweven:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_option td {
  background-color: #dde1eb;
}
table.{{$t|escape:'html'}}_optionde td.title {
  padding: 0 5px 0 0;
  font-weight: bold;
  text-align: right;
  color: 7b7b7b;
  font-size: 11px;
  height: 25px;
}
table.{{$t|escape:'html'}}_optionde input {
  width: 100px;
}

table.table {
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
}

table.table td {
  text-align: left;
  height: 35px;
  padding: 5px 0 5px 10px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

table.{{$t|escape:'html'}}_new_address tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

table.{{$t|escape:'html'}}_new_address tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.drop {
  width: 75px;
  text-align: right;
  padding: 0 10px 0 0;
}

.option {
  min-width: 100px;
  height: 35px;
  border: 1px solid #000000;
  text-align: center;
  cursor: pointer;
}

.option:hover {
  background-color: #dddddd;
}

</style>

<div class="{{$t|escape:'html'}}_main">
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #d6e3f7;">
      <span class="image_button" style="width: 100px;" onclick="save_order();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Basic Information{{/t}}</div>
    <table style="width: 100%;">
      <tr>
        <td style="width: 100%;vertical-align: top;">
          <table class="{{$t|escape:'html'}}_table">
            <tr>
              <td class="title">{{t escape='html'}}Paid{{/t}}</td>
              <td style="padding-top: 5px;">
                <input id="{{$t|escape:'html'}}_paid" name="{{$t|escape:'html'}}_status" type="checkbox" {{if isset($order) && $order->is_paid == 1}}checked="checked"{{else if !isset($order)}}checked="checked"{{/if}}></input>
              </td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Shipped{{/t}}</td>
              <td style="padding-top: 5px;">
                <input id="{{$t|escape:'html'}}_shipped" name="{{$t|escape:'html'}}_status" type="checkbox" {{if isset($order) && $order->is_shipped == 1}}checked="checked"{{else if !isset($order)}}checked="checked"{{/if}}></input>
              </td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Price{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_price" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($order)}}{{$order->total|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. $99.99){{/t}}</span></td>
            </tr>
            <!--
            <tr>
              <td class="title">{{t escape='html'}}CC Email{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_cc_email" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($order)}}{{$order->cc_email|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. Sample@xx.com){{/t}}</span></td>
            </tr>
            -->
            <tr>
              <td class="title">{{t escape='html'}}Comment{{/t}}</td>
              <td><textarea id="{{$t|escape:'html'}}_comment" type="text" class="{{$t|escape:'html'}}_textarea">{{if isset($order)}}{{$order->comment|escape:'html'}}{{/if}}</textarea></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Address{{/t}}</td>
              <td align="left">
                <table id="{{$t|escape:'html'}}_addresses" cellPadding="0" cellSpacing="0" class="table"></table>
                <table id="{{$t|escape:'html'}}_new_address" class="table" style="display: none; margin-top: 5px;" cellPadding="0" cellSpacing="0">
                  <tr class="roweven" style="height: 30px">
                    <td class="drop">Name</td>
                    <td style="width: 200px;"><input id="addr_name" type="text"></input></td>
                    <td class="drop">Address</td>
                    <td style="width: 200px;"><input id="addr_address" type="text"></input></td>
                  </tr>
                  <tr class="roweven" style="height: 30px">
                    <td class="drop">Phone</td>
                    <td style="width: 200px;"><input id="addr_tel" type="text"></input></td>
                    <td class="drop">Suburb</td>
                    <td style="width: 200px;"><input id="addr_suburb" type="text"></input></td>
                  </tr>
                  <tr class="roweven" style="height: 30px">
                    <td class="drop">Mobile</td>
                    <td style="width: 200px;"><input id="addr_mob" type="text"></input></td>
                    <td class="drop">City</td>
                    <td style="width: 200px;"><input id="addr_city" type="text"></input></td>
                  </tr>
                  <tr class="roweven" style="height: 30px">
                    <td class="drop">Zip Code</td>
                    <td style="width: 200px;"><input id="addr_zip" type="text"></input></td>
                    <td class="drop">State</td>
                    <td style="width: 200px;"><input id="addr_state" type="text"></input></td>
                  </tr>
                  <tr class="roweven" style="height: 30px">
                    <td style="width: 75px;"></td>
                    <td style="width: 200px;"></td>
                    <td class="drop">Country</td>
                    <td style="width: 200px;"><input id="addr_country" type="text"></input></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Payment Methods{{/t}}</td>
              <td align="left">
                <table id="{{$t|escape:'html'}}_shippings" cellPadding="0" cellSpacing="0" class="table"></table>
              </td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Shipping Methods{{/t}}</td>
              <td align="left">
                <table id="{{$t|escape:'html'}}_payments" cellPadding="0" cellSpacing="0" class="table"></table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">
      {{t escape='html'}}Purchases{{/t}}<span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. Leather Album){{/t}}</span>
    </div>
    <table id="{{$t|escape:'html'}}_purchases" class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0">
      <tr>
        <td style="height: 50px;padding-left: 10px;"><input id="{{$t|escape:'html'}}_purchases_select" type="checkbox"></input></td>
        <td style="padding-left: 10px;" colSpan=5>
          <table>
            <tr>
              <td><select id="{{$t|escape:'html'}}_purchases_actions"><option>{{t escape='html'}}Actions...{{/t}}</option></select></td>
              <!--
              <td><select id="{{$t|escape:'html'}}_product_select" style="width: 150px;"><option>{{t escape='html'}} - {{/t}}</option></select></td>
              <td>
                <span class="image_button" style="width: 100px;" onclick="add_purchase();">
                  <table>
                    <tr>
                      <td><img src="image/btn/add.png"></img></td>
                      <td>{{t escape='html'}}Add New{{/t}}</td>
                    </tr>
                  </table>
                </span>
              </td>
              -->
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th style="width: 50px;"></th>
        <th style="width: 250px;">{{t escape='html'}}Name{{/t}}</th>
        <th style="width: 150px;">{{t escape='html'}}Price{{/t}}</th>
        <th style="width: 80px;">{{t escape='html'}}Quantity{{/t}}</th>
        <th style="width: 120px;">{{t escape='html'}}Total{{/t}}</th>
        <th style="width: 100px;">{{t escape='html'}}Ship Required{{/t}}</th>
        <th style="width: 130px;">{{t escape='html'}}Last Modified{{/t}}</th>
        <th style="width: 130px;">{{t escape='html'}}Added Date{{/t}}</th>
        <th style="border-right: 0;"></th>
      </tr>
    </table>
    <div>
      <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #d6e3f7;">
        <span class="image_button" style="width: 100px;" onclick="save_order();">
          <table>
            <tr>
              <td><img src="image/btn/save24.png"></img></td>
              <td>{{t escape='html'}}Save{{/t}}</td>
            </tr>
          </table>
        </span>
        <span class="image_button" style="width: 100px;" onclick="history.back();">
          <table>
            <tr>
              <td><img src="image/btn/cancel24.png"></img></td>
              <td>{{t escape='html'}}Cancel{{/t}}</td>
            </tr>
          </table>
        </span>
      </div>
    <div>
  </div>
</div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _id = {{if isset($order)}}'{{$order->id|escape:'javascript'}}'{{else}}0{{/if}};
    var _track = {{if $track_id != NULL}}'{{$track_id|escape:'javascript'}}'{{else}}MiscUtils.unique(){{/if}};
    var _order = JSON.parse('{{$order|@json_encode|escape:'javascript'}}');
    var _addresses = {{if isset($addresses)}}JSON.parse('{{$addresses|@json_encode|escape:'javascript'}}'){{else}}[]{{/if}};
    var _payments = JSON.parse('{{$payments|@json_encode|escape:'javascript'}}');
    var _shippings = JSON.parse('{{$shippings|@json_encode|escape:'javascript'}}');
    var _products = JSON.parse('{{$products|@json_encode|escape:'javascript'}}');
    var _options = [];
    var _move = null;
    var _edit = null;
    var _y = 0;
    var _pbox = null;
    var _opane = null;
    var _selects = [];
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      var tr, td, table, elm, div, p;
      
      setAddresses();
      setShippings();
      setPayments();
      update_purchases_table();
      
      /*--product select
      var product_select = document.getElementById('{{$t|escape:'html'}}_product_select');
      for (var i = 0, il = _products.length; i < il; i++) {
        var pro = _products[i];
        op = new Option(pro.name);
        op._pro = pro;
        product_select.options[product_select.options.length] = op;
      }
      */
      
      var select, actions;
      select = document.getElementById('{{$t|escape:'html'}}_purchases_select');
      select.onclick = function() {
        for (var idx in  _selects) {
          var obj = _selects[idx];
          obj.checked = this.checked;
        }
      };
      actions = document.getElementById('{{$t|escape:'html'}}_purchases_actions');
      actions.options[actions.options.length] = new Option('{{t escape='javascript'}}Delete{{/t}}');
      actions.onchange = function() {
        if (this.selectedIndex == 1) {
          var deletes = [];
          for (var idx in  _selects) {
            var obj = _selects[idx];
            if (obj.checked) {
              deletes[deletes.length] = obj._obj;
            }
          }
          new RequestUtils()._custom('delete_purchases', JSON.stringify(deletes), function(result, params) {
            for (var idx in  deletes) {
              var obj = deletes[idx];
              MiscUtils.remove(_order.purchases, obj, null);
            }
            update_purchases_table();
            actions.selectedIndex = 0;
          }, {
            php: 'ecommerce/custom.php',
            pos : DOMUtils.findPos(this)
          });
        }
      };
    }
    
    /*--- add purchase
    function add_purchase() {
      var product_select = document.getElementById('{{$t|escape:'html'}}_product_select');
      var _product = (product_select.options[product_select.selectedIndex]._pro) ? product_select.options[product_select.selectedIndex]._pro : null;
      if (!_product) {
        window.alert('Please select a product');
        return;
      }
      var purchase = {
          track_id: MiscUtils.unique(),
          customer_id: _order.customer_id,
          order_id: _order.id,
          product_id: _product.id,
          name: _product.name,
          price: _product.price,
          quantity: 1,
          total: _product.price,
          ship_req: _product.ship_req,
          is_shipped: 0
        };
        
      var attributes = [];
      var options = [];
      for (var idx in _product.attributes) {
        var obj = _product.attributes[idx];
        var attribute = { track_id: MiscUtils.unique(),
                          purchase_track_id: purchase.track_id,
                          attribute_id: obj.id,
                          name: obj.name,
                          type: obj.type,
                          customer_input: ''
                        };
        attributes[attributes.length] = attribute;
        for (var idx2 in obj.options) {
          var obj2 = obj.options[idx2];
          if (obj2.is_default == 1) {
            var option = { track_id: MiscUtils.unique(),
                           attribute_track_id: attribute.track_id,
                           option_id: obj2.id,
                           name: obj2.name
                         };
            options[options.length] = option;
          }
        }
      }
      new RequestUtils()._custom('add_purchase', JSON.stringify({ p: purchase, a: attributes, opts: options }), function(result, params) {
        location.reload();
      }, {
        php: 'ecommerce/custom.php',
        pos : DOMUtils.findPos(this)
      });
    }
    */
    
    function save_order() {
      var paid = document.getElementById('{{$t|escape:javascript}}_paid');
      var shipped = document.getElementById('{{$t|escape:javascript}}_shipped');
      var price = document.getElementById('{{$t|escape:javascript}}_price');
      //var cc_email = document.getElementById('{{$t|escape:javascript}}_cc_email');
      var comment = document.getElementById('{{$t|escape:javascript}}_comment');
      _order.is_paid = (paid.checked) ? 1 : 0;
      _order.is_shipped = (shipped.checked) ? 1 : 0;
      _order.total = price.value;
//      _order.cc_email = cc_email.value;
      _order.comment = comment.value;
      
      if (_order.addr_id == -1) {
        _order.addr_name = document.getElementById('addr_name').value;
        _order.addr_tel = document.getElementById('addr_tel').value;
        _order.addr_mob = document.getElementById('addr_mob').value;
        _order.addr_zip = document.getElementById('addr_zip').value;
        _order.addr_address = document.getElementById('addr_address').value;
        _order.addr_suburb = document.getElementById('addr_suburb').value;
        _order.addr_city = document.getElementById('addr_city').value;
        _order.addr_state = document.getElementById('addr_state').value;
        _order.addr_country = document.getElementById('addr_country').value;
      }
      
      new RequestUtils()._custom('update_order', JSON.stringify({ order: _order}), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=orders';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
    }
    
    function setAddresses() {
      var table, tr, td, elm;
      
      var table = document.getElementById('{{$t|escape:javascript}}_addresses');
      while (table.rows.length > 11) {
        table.deleteRow(1);
      }
      
      if (_addresses.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'roweven';
        td = tr.insertCell(-1);
        td.style.width = '900px';
        td.style.padding = '0 0 0 20px';
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Addresses Found{{/t}}'));
        return;
      }
      
      for (var idx in _addresses) {
        var obj = _addresses[idx];
        tr = table.insertRow(-1);
        tr.className = 'roweven';
        td = tr.insertCell(-1);
        td.style.width = '40px';
        elm = document.createElement('input');
        elm.type = 'radio';
        elm.name = 'addresses';
        elm._obj = obj;
        elm.checked = (obj.id == _order.addr_id) ? true : false;
        elm.onclick = function() {
          document.getElementById('{{$t|escape:javascript}}_new_address').style.display = 'none';
          _order.addr_id = this._obj.id;
          _order.addr_name = this._obj.name;
          _order.addr_tel = this._obj.tel;
          _order.addr_mob = this._obj.mob;
          _order.addr_zip = this._obj.zip;
          _order.addr_address = this._obj.address;
          _order.addr_suburb = this._obj.suburb;
          _order.addr_city = this._obj.city;
          _order.addr_state = this._obj.state;
          _order.addr_country = this._obj.country;
        };
        
        td.appendChild(elm);
        td = tr.insertCell(-1);
        td.style.width = '860px';
        elm = document.createElement('span');
        elm.style.fontSize = '12px';
        elm.style.fontWeight = 'bold';
        elm.appendChild(document.createTextNode(obj.name + ', '));
        td.appendChild(elm);
        td.appendChild(document.createTextNode(obj.address + ', ' + obj.suburb + ', ' + obj.city + ', ' + obj.state + ', ' + obj.country + ' ' + obj.zip));
      }
      
      tr = table.insertRow(-1);
      tr.className = 'roweven';
      td = tr.insertCell(-1);
      td.style.width = '40px';
      elm = document.createElement('input');
      elm.type = 'radio';
      elm.name = 'addresses';
      elm.onclick = function() {
        document.getElementById('{{$t|escape:javascript}}_new_address').style.display = 'table';
        _order.addr_id = -1;
      };
      td.appendChild(elm);
      td = tr.insertCell(-1);
      td.style.width = '858px';
      td.appendChild(document.createTextNode('New Address'));
    }

    function setShippings() {
      var table, tr, td, elm;
      
      var table = document.getElementById('{{$t|escape:javascript}}_shippings');
      while (table.rows.length > 1) {
        table.deleteRow(1);
      }

      if (_shippings.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'roweven';
        td = tr.insertCell(-1);
        td.colSpan = 4;
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Results Found{{/t}}'));
      }
      
      for (var idx in _shippings) {
        var obj = _shippings[idx];
        tr = table.insertRow(-1);
        tr.className = (idx % 2 == 1) ? 'rowodd' : 'roweven';
        
        td = tr.insertCell(-1);
        td.style.width = '40px';
        elm = document.createElement('input');
        elm.type = 'radio';
        elm.name = 'shippings';
        elm._obj = obj;
        elm.checked = (obj.id == _order.ship_id) ? true : false;
        elm.onclick = function() {
          _order.ship_id = this._obj.id;
          _order.ship_name = this._obj.name;
          _order.ship_total = this._obj.total;
        };
        td.appendChild(elm);
        td = tr.insertCell(-1);
        td.style.width = '200px';
        td.appendChild(document.createTextNode(obj.name));
        td = tr.insertCell(-1);
        td.style.width = '200px';
        td.appendChild(document.createTextNode('$' + obj.total));
        td = tr.insertCell(-1);
        td.style.width = '438px';
        td.appendChild(document.createTextNode(obj.intro_brief));
      }
    }

    
    function setPayments() {
      var table, tr, td, elm;
      
      var table = document.getElementById('{{$t|escape:javascript}}_payments');
      while (table.rows.length > 1) {
        table.deleteRow(0);
      }

      if (_payments.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'roweven';
        td = tr.insertCell(-1);
        td.colSpan = 4;
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Payment Found{{/t}}'));
      }
      
      for (var idx in _payments) {
        var obj = _payments[idx];
        tr = table.insertRow(-1);
        tr.className = (idx % 2 == 1) ? 'rowodd' : 'roweven';
        
        td = tr.insertCell(-1);
        td.style.width = '40px';
        elm = document.createElement('input');
        elm.type = 'radio';
        elm.name = 'payments';
        elm._obj = obj;
        elm.checked = (obj.id == _order.payment_id) ? true : false;
        elm.onclick = function() {
          _order.payment_id = this._obj.id;
          _order.payment_name = this._obj.name;
        };
        td.appendChild(elm);
        td = tr.insertCell(-1);
        td.style.width = '200px';
        td.appendChild(document.createTextNode(obj.name));
        td = tr.insertCell(-1);
        td.style.width = '200px';
        td.appendChild(document.createTextNode(''));
        td = tr.insertCell(-1);
        td.style.width = '438px';
        td.appendChild(document.createTextNode(obj.intro_brief));
      }
    }
    
    function update_purchases_table() {
      var table, tr, td, elm, div;
      //Purchases
      table = document.getElementById('{{$t|escape:'javascript'}}_purchases');
      
      DOMUtils.removeTableRows(table, 2);
      
      if (_order.purchases.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'nohover';
        td = tr.insertCell(-1);
        td.colSpan = 6;
        td.style.padding = '5px 0 5px 10px';
        td.style.height = '35px';
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Purchases Found{{/t}}'));
        
      } else {
        _order.purchases = MiscUtils.sortByOrder(_order.purchases);

        for (var idx in _order.purchases) {
          var obj = _order.purchases[idx];
          
          tr = table.insertRow(-1);
          if (!_edit || _edit.id != obj.id) {
            document.body.onmouseup = function(ev) {
              ev = (ev) ? ev : window.event;
              if (!_move) {
                return;
              }
              new RequestUtils()._custom('purchase', JSON.stringify(_move), function(result, params) {
                _move = null;
                update_attributes_table();
              }, {
                php: 'ecommerce/custom.php',
                pos : [ev.clientX, ev.clientY]
              });
            };
            
            if (_move) {
              tr.style.cursor = 'move';
            }
            
            if (_move && obj.track_id == _move.track_id) {
              tr.className = 'hi';
            } else {
              tr.className = (idx % 2 == 1) ? tr.className = 'rowodd' : 'roweven';
            }
            
            td = tr.insertCell(-1);
            elm = document.createElement('input');
            elm.type = 'checkbox';
            elm._obj = obj;
            _selects.push(elm);
            td.appendChild(elm);
            
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode(obj.name));
            
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode('$' + obj.price));
            
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode(obj.quantity));
            
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode('$' + obj.total));
            
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode((obj.ship_req == 1) ? 'YES' : 'NO'));
          
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode(MiscUtils.formatDate(obj.date_last_mod, '{{$lang|escape:'javascript'}}')));
            
            td = tr.insertCell(-1);
            td.appendChild(document.createTextNode(MiscUtils.formatDate(obj.date_added, '{{$lang|escape:'javascript'}}')));
            
            
            td = tr.insertCell(-1);
            elm = document.createElement('img');
            elm.className = '{{$t|escape:'javascript'}}_image_button';
            elm.src = 'image/edit.png';
            elm._obj = obj;
            elm.onclick = function() {
              _edit = this._obj;
              update_purchases_table();
            }
            td.appendChild(elm);
          } else {
            tr.className = 'drop';
            td = tr.insertCell(-1);
            td.colSpan = 10;
            td.style.padding = 0;
            td.style.border = 0;
            setup_purchase_dialog(td);
          }
        }
      }
    }

    function setup_purchase_dialog(container) {
      var div, table, tr, td, itable, itr, itd, elm;
      
      var clone = MiscUtils.clone(_edit);
      
      DOMUtils.removeChildElements(container);
      
      table = document.createElement('table');
      container.appendChild(table);
      
      div = document.createElement('div');
      container.appendChild(div);
      div.style.textAlign = 'center';
      div.style.padding = '5px 0';
      div.style.backgroundColor = '#b4c8fa';
      elm = Utils.imgBtn('{{t escape='javascript'}}Update{{/t}}', 'image/btn/update.png');
      elm.style.width = '100px';
      elm.style.fontSize = '11px';
      elm.onclick = function () {
        new RequestUtils()._custom('update_purchase', JSON.stringify({a: _edit, o: _edit.attributes}), function(result, params) {
          _edit = result;
          for (var idx in _order.purchases) {
            if (_order.purchases[idx].id == _edit.id) {
              _order.purchases[idx] = _edit;
            }
          }
          _edit = null;
          update_purchases_table();
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      };
      div.appendChild(elm);
      elm = Utils.imgBtn('{{t escape='javascript'}}Cancel{{/t}}', 'image/btn/close.png');
      elm.style.width = '100px';
      elm.style.fontSize = '11px';
      div.appendChild(elm);
      elm.onclick = function() {
        for (var idx in _order.purchases) {
          if (_order.purchases[idx].id == _edit.id) {
            _order.purchases[idx] = clone;
          }
        }
        _edit = null;
        update_purchases_table();
      }
      div.appendChild(elm);
      
      div = document.createElement('div');
      div.style.backgroundColor = '#ffffff';
      div.style.borderLeft = '15px solid #b4c8fa';
      div.style.borderRight = '15px solid #b4c8fa';
      container.appendChild(div);
      
      table = document.createElement('table');
      table.style.width = '100%';
      div.appendChild(table);
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.width = '100%';
      td.style.textAlign = 'left';
      
      itable = document.createElement('table');
      itable.className = '{{$t|escape:'html'}}_listdrop';
      td.appendChild(itable);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Name{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.name;
      elm.onchange = function() {
        _edit.name = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Price{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.price;
      elm.onchange = function() {
        _edit.price = this.value;
        _edit.total = _edit.quantity * _edit.price;
        setup_purchase_dialog(container);
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Quantity{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.quantity;
      elm.onchange = function() {
        _edit.quantity = this.value;
        _edit.total = _edit.quantity * _edit.price;
        setup_purchase_dialog(container);
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Total{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.total;
      elm.onchange = function() {
        _edit.total = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Ship Required{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'checkbox';
      elm.checked = (_edit.ship_req == 1) ? 1 : 0;
      elm.onchange = function() {
        _edit.ship_req = this.checked ? 1 : 0;
      };
      itd.appendChild(elm);
      
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.verticalAlign = 'top';
      td.colSpan = 2;
      
      itable = document.createElement('table');
      itable.className = '{{$t|escape:'html'}}_listdrop';
      itable.cellPadding = 0;
      itable.cellSpacing = 0;
      td.appendChild(itable);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Options{{/t}}'));
      itd = itr.insertCell(-1);
    
      setAttrs(itable, _edit);
      
      div = document.createElement('div');
      container.appendChild(div);
      div.style.padding = '5px 0';
      div.style.backgroundColor = '#b4c8fa';
    }
    
    

    function setAttrs(table, edit) {
      var table, tr, td, elm, itable, itr, itd;
      while (table.rows.length > 0) {
        table.deleteRow(0);
      }
      for (var idx in edit.product.attributes) {
        var obj = edit.product.attributes[idx];
        tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        td.style.textAlign = 'left';
        td.style.fontWeight = '600';
        td.style.fontSize = '15px';
        td.style.fontFamily = 'Trebuchet MS';
        td.style.paddingLeft = '10px';
        td.appendChild(document.createTextNode(obj.name));
        tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        itable = document.createElement('table');
        td.appendChild(itable);
        
        for (var idx2 in obj.options) {
          var obj2 = obj.options[idx2];
          if (idx2 % 5 == 0) {
            itr = itable.insertRow(-1);
          }
          itd = itr.insertCell(-1);
          itd.className = 'option';
          itd.style.fontWeight = '400';
          itd.style.fontSize = '13px';
          itd.style.fontFamily = 'Trebuchet MS';
          itd.appendChild(document.createTextNode(obj2.name));
          itd._obj = obj;
          itd._obj2 = obj2;
          itd.onclick = function() {
            optionchoose(edit, this._obj, this._obj2);
            setAttrs(table, edit);
          }
          if (optionchosen(edit, obj, obj2)) {
            itd.style.border = '1px solid #ff8000';
          } else {
            itd.style.border = '1px solid #111';
          }
        }
      }
    }
    
    function optionchoose(edit, attr, opt) {
      var exist = false;
      for (var i = 0, il = edit.attributes.length; i < il; i++) {
        var attribute = edit.attributes[i];
        if (attribute.attribute_id == attr.id) {
          for (var j = 0, jl = attribute.options.length; j < jl; j++) {
            var option = attribute.options[j];
            if (option.id) {
              if (option.option_id != opt.id) {
                option.name = opt.name;
                option.option_id = opt.id;
              }
            } else {
              attribute.options.splice(j, 1);
              var opti = {
                  id: null,
                  track_id: MiscUtils.unique(),
                  attribute_track_id: attribute.track_id,
                  option_id: opt.id,
                  name: opt.name
                };
              attribute.options[attribute.options.length] = opti;
            }
          }
          exist = true;
        }
      }
      if (!exist) {
        var attri = {
            track_id: MiscUtils.unique(),
            purchase_track_id: edit.track_id,
            attribute_id: attr.id,
            name: attr.name,
            type: attr.type,
            customer_input: ''
          };
        var opti = {
            track_id: MiscUtils.unique(),
            attribute_track_id: attri.track_id,
            option_id: opt.id,
            name: opt.name
          };
        attri.options = [];
        attri.options[attri.options.length] = opti;
        edit.attributes[edit.attributes.length] = attri;
      }
    }
    
    function optionchosen(edit, attr, opt) {
      for (var i = 0, il = edit.attributes.length; i < il; i++) {
        var attribute = edit.attributes[i];
        if (attribute.deleted == 1) {
          continue;
        }
        if (attribute.attribute_id == attr.id) {
          for (idx in attribute.options) {
            if (attribute.options[idx].deleted == 1) {
              continue;
            }
            if (attribute.options[idx].option_id == opt.id) {
              return true;
            }
          }
        }
      }
      return false;
    };
  // -->
</script>